23.08.24

오늘 한 일

• gloddy 게시글 작성 페이지 구현
• 프로그라피 어드민 페이지 회의

🤔 프로그라피 어드민 페이지

원래 랜딩 페이지 구현하기로 했는데, 추가로 어드민 페이지도 제안을 받았다.

근데 아직까지 어드민 페이지를 하겠다는 웹 개발자가 나밖에 없어서 어떻게 해야할지 고민이다.
혼자만 아니라면 참여하고 싶다..! 운영진이 못해도 한명은 무조건 데려온다고 했으니 한다고 생각해야겠다.

---

gloddy

useFileUpload 훅 만들기

파일을 업로드하는 로직을 커스텀 훅으로 만들었다.

컴포넌트의 UI가 변경되어도 로직을 변경할 필요가 없도록 하기 위해 커스텀 훅으로 분리했다.

import { useCallback } from 'react';

interface UseImageUploadProps {
  /**
   * 파일 업로드가 완료되었을 때 실행할 함수를 지정합니다.
   */
  handleFileChange: (files: File[]) => void;
  options?: {
    /**
     * 업로드할 파일의 타입을 지정합니다. (default: image/*)
     */
    accept?: string;
    /**
     * 다중 업로드를 허용할지 여부를 지정합니다. (default: false)
     */
    multiple?: boolean;
  };
}

export function useFileUpload(
  handleFileChange: UseImageUploadProps['handleFileChange'],
  options?: UseImageUploadProps['options']
) {
  const handleFileUploadClick = useCallback(() => {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = options?.accept || 'image/*';
    input.multiple = options?.multiple || false;
    input.click();
    input.onchange = event => {
      const { files } = event.target as HTMLInputElement;
      if (!files) return;

      handleFileChange(Array.from(files));
    };
  }, [handleFileChange, options]);

  return {
    handleFileUploadClick,
  };
}

useFileUpload 훅 사용하기

const {
  field: { value, onChange },
} = useController({
  name: 'images',
  control,
});

const { handleFileUploadClick } = useFileUpload(files => onChange([...value, ...files]), {
  multiple: true,
});

return (
  // ...
  <AddImageButton imageCount={value.length} onClick={handleFileUploadClick} />
);

나 같은 경우에는 react-hook-form을 사용하고 있어서, field의 value와 onChange를 받아서 사용했다.

이로서 코드 한줄로 파일 업로드 기능을 구현할 수 있게 되었다.

---

내일 할 일

• 데모데이 준비